<template>
  <el-container>
    <el-main>
      <el-input v-model="username" placeholder="输入账号查询" style="width: 180px" />
      <el-select v-model="value" clearable placeholder="请选择" style="width: 150px" >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" round @click="oauthQuery">查询</el-button>
      <el-table :data="tableData" stripe height="700px" style="width: 98%" v-loading="loading">
        <el-table-column prop="id" label="id" v-if="false"/>
        <el-table-column prop="username" label="账号"/>
        <el-table-column prop="platformType" label="平台类型"/>
        <el-table-column prop="platformId" label="UUID"/>
        <el-table-column prop="platformName" label="三方账号昵称"/>
        <el-table-column prop="createTime" label="绑定时间"/>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              解绑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes,prev, pager, next"
        :total="total">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { getOauthList, oauthDelete } from '@/api/oauth'
export default {
  name: "Oauth",
  data(){
    return {
      loading: true,
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      options: [{
        value: 'QQ',
        label: '腾讯QQ'
      }, {
        value: 'GITEE',
        label: '码云-Gitee'
      }, {
        value: 'WEChATX',
        label: '微信小程序'
      }],
      value: '',
      username: ''
    }
  },
  created() {
    this.getOauthList()
  },
  methods: {
    async getOauthList(){
      const { data } = await getOauthList({
        page: this.currentPage,
        pageSize: this.pageSize,
        username: this.username,
        type: this.value
      })
      this.tableData = data.data.records
      this.total = data.data.total
      this.loading = false
    },
    handleSizeChange: function(pageSize) {
      // 每页条数切换
      this.pageSize = pageSize
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange: function(currentPage) {
      this.loading = true
      // 页码切换
      this.currentPage = currentPage
      this.getOauthList()
    },
    deleteRow(index, rows) {
      this.$confirm('此操作将解绑该用户此类型的三方账号，否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        oauthDelete(rows[index]).then(res => {
          this.$message.success(res.data.msg)
          rows.splice(index, 1);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    oauthQuery(){
      this.loading = true
      this.getOauthList()
    }
  }
}
</script>
